<template>
    <div class="bx-prodect-config">
        <van-nav-bar
                title="产品配置"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="up-img" style="margin-top: 20px;">
            <div><span style="color: red;">*</span>客户营业执照上传</div>
            <van-uploader :max-count="1" v-model="business_license" @click-preview="showImg(0)"
                          :preview-full-image="false" :after-read="afterRead" :name="'license'">
                <img class="up-icon" src="../../../assets/img/zhizhao.png" alt="">
            </van-uploader>
        </div>
        <div class="up-img">
            <div><span style="color: red;">*</span>法人身份证上传</div>
            <van-uploader :max-count="1" v-model="id_card" @click-preview="showImg(1)"
                          :preview-full-image="false" :after-read="afterRead" :name="'idCard'">
                <img class="up-icon" src="../../../assets/img/id_card.png" alt="">
            </van-uploader>
        </div>
        <div style="height:8px;background: #f5f5f5;"></div>
        <div class="title">
            产品配置
        </div>
        <div class="product-config" v-for="(item, index) in config" :key="index">
            <div class="line">
                <div>
                    <div class="type-box" @click="goodsPopupShow = true ;goodsPopupShowIndex = index">
                        {{goodsSource.length==0?'--请选择--':goodsSource[item.goodsIndex].name}}
                        <img src="../../../assets/icon/row.png" alt="">
                    </div>
                </div>
                <div class="money-box">
                    <input type="name" v-model="item.price">
                    <span>元</span>
                </div>
            </div>
            <div class="line">
                <van-field readonly clickable :value="timeTurn(item.startTime)" @click="selectTime('start',index)" right-icon="clock-o" />
                <van-field readonly clickable :value="timeTurn(item.endTime)" @click="selectTime('end',index)" right-icon="clock-o" />
            </div>
            <div class="up-box">
                <van-uploader :after-read="uploadSuccess" accept="*" :name="index">
                    <van-button icon="upgrade" size="small" :color="item.file == '' ? '#7232dd':'#999'" type="primary">
                        {{item.file == '' ? '未上传合同':'已上传合同'}}
                    </van-button>
                </van-uploader>
                <van-button tag="div" size="small" color="linear-gradient(to right, #f54a51, #b62e34)" type="warning" @click="delConfig(index)">删除配置
                </van-button>
            </div>
        </div>

        <van-popup v-model="goodsPopupShow" position="bottom">
            <van-picker show-toolbar value-key="name" :columns="goodsSource" @cancel="goodsPopupShow = false" @confirm="goodsSelectConfirm" />
        </van-popup>

        <van-popup v-model="startTimePopupShow" position="bottom">
            <van-datetime-picker v-model="startTimeVal" type="date" @cancel="startTimePopupShow = false" @confirm="timeConfirm('start')" />
        </van-popup>
        <van-popup v-model="endTimePopupShow" position="bottom">
            <van-datetime-picker v-model="endTimeVal" type="date" @cancel="endTimePopupShow = false" @confirm="timeConfirm('end')" />
        </van-popup>
        <div class="foot-btn">
            <div class="blue-btn" @click="addConfig">新增产品配置</div>
            <div class="red-btn" @click="pushInfo">保存配置</div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "qyProdectConfig",
        data() {
            return {
                business_license: [], //营业执照
                id_card: [], //法人身份证

                config: [
                    {
                        goodsIndex: 0,
                        price: '',
                        startTime: new Date(),
                        endTime: new Date(),
                        file: '',
                    }
                ],

                timeIndex: '',
                startTimeVal: '',
                startTimePopupShow: false,

                endTimeVal: '',
                endTimePopupShow: false,

                minDate: new Date(2018, 0, 1),
                maxDate: new Date(),
                qiniuToken: {},
                goodsPopupShow: false,
                goodsPopupShowIndex: Number,
                goodsSource: [],
                imgUrl1: '',
                imgUrl2: '',
            };
        },
        methods: {
            showImg(index) {
                let imgUrl = []
                if (index == 0) imgUrl.push(this.imgUrl1)
                else imgUrl.push(this.imgUrl2)
                console.log(imgUrl);
                this.$imagePreview({
                    images: imgUrl,
                    index: 0,
                })
            },
            timeTurn(val) {
                return this.$formatDateTime(val, 'yyyy-MM-dd');
            },
            afterRead(file, index) {
                let { name } = index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                this.$QiniuUpload(this.qiniuToken, file)
                    .then(res => {
                        this.$Toast.clear();
                        if (name == 'license') {
                            this.business_license = [
                                {url: this.qiniuToken.domain + res.key},
                            ]
                            this.imgUrl1 = this.qiniuToken.domain + res.key
                        } else {
                            this.id_card = [
                                {url: this.qiniuToken.domain + res.key},
                            ]
                            this.imgUrl2 = this.qiniuToken.domain + res.key
                        }
                    })
                    .catch(err => {
                        this.$Toast.clear();
                    });

            },
            // 文件上传
            uploadSuccess(file, index) {
                let { name } = index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                this.$QiniuUpload(this.qiniuToken, file)
                    .then(res => {
                        this.$Toast.clear();
                        this.config[name].file = this.qiniuToken.domain + res.key
                    })
                    .catch(err => {
                        this.$Toast.clear();
                    });

            },
            goodsSelectConfirm(value, index) {
                let data = this.config[this.goodsPopupShowIndex];
                data.goodsIndex = index;
                this.$set(this.config, this.goodsPopupShowIndex, data);
                this.goodsPopupShow = false;
            },
            addConfig(value) {
                let data = {
                    goodsIndex: 0,
                    price: '',
                    startTime: new Date(),
                    endTime: new Date(),
                    file: '',
                }
                this.config.push(data)
            },
            delConfig(index) {
                this.$Dialog.confirm({
                    title: '温馨提示',
                    message: '确认删除这个产品配置么',
                    closeOnPopstate: true,
                })
                    .then(() => {
                        this.config.splice(index, 1)
                    })
                    .catch(() => {
                    });
            },
            getQiniuToken() {
                this.$post("/api/qiniu/up_token", {})
                    .then(res => {
                        this.qiniuToken = res
                    })
                    .catch(err => {
                    });

            },
            getProductConfig() {
                let data = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: 6,
                }
                this.$post("/api/member_goods/get_product", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.goodsSource = res.data.goods
                        }
                    })
                    .catch(err => {
                    });

            },
            selectTime(type, index) {
                this.timeIndex = index
                if (type == 'start') {
                    this.startTimeVal = this.config[index].startTime
                    this.startTimePopupShow = true
                }
                if (type == 'end') {
                    this.endTimeVal = this.config[index].endTime
                    this.endTimePopupShow = true
                }

            },
            timeConfirm(type) {
                if (type == 'start') {
                    this.config[this.timeIndex].startTime = this.startTimeVal
                    this.startTimePopupShow = false
                }
                if (type == 'end') {
                    this.config[this.timeIndex].endTime = this.endTimeVal
                    this.endTimePopupShow = false
                }

            },
            pushInfo() {
                if (this.business_license.length == 0) {
                    this.$Toast('请上传客户营业执照')
                    return
                }
                if (this.id_card.length == 0) {
                    this.$Toast('请上传法人身份证')
                    return
                }
                let goodsArr = [];
                let priceArr = [];
                let timeArr = [];
                let fileArr = [];
                this.config.map((item, index) => {
                    if (item.price == '') {
                        this.$Toast('请完善所有的产品价格')
                        return;
                    }
                    if (item.file == '') {
                        this.$Toast('请上传所有的合同文件')
                        return;
                    }
                    let time = `${this.timeTurn(item.startTime)} ~ ${this.timeTurn(item.endTime)}`
                    goodsArr.push(this.goodsSource[item.goodsIndex].id)
                    priceArr.push(item.price)
                    timeArr.push(time)
                    fileArr.push(item.file)
                });
                if (goodsArr.length != this.config.length) {
                    return
                }
                let data = {
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: 6,

                    business_license: this.business_license[0].url,
                    id_card: this.id_card[0].url,

                    goods_id: goodsArr,//选中商品
                    price: priceArr,//价格
                    over_time: timeArr,//合同时间
                    contract: fileArr, //合同
                }
                this.$post("/api/member_goods/save_product", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast('保存成功')
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                        } else {
                            this.$Toast(res.msg)
                        }
                    })
                    .catch(err => {
                    });

            }
        },
        created() {
            this.getQiniuToken();
            this.getProductConfig();
        },

    };
</script>

<style scoped lang="less">
    /**
        * @Description: 业务-保险-产品配置
        * @author Wangshu
        * @date 2020/1/4
        */
    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 32px;
    }

    .up-img {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 13px;
        padding-right: 15px;
        margin-bottom: 15px;

        > div:nth-of-type(1) {
            margin-left: 13px;
            margin-right: 22px;
        }

        .up-icon {
            width: 57vw;
            height: 112px;
        }
    }

    .product-config {
        width: 90vw;
        margin-left: 5vw;
        border: 1px solid #e6e6e6;
        padding: 15px 7px;
        box-sizing: border-box;
        border-radius: 2px;
        margin-bottom: 16px;

        .type-box {
            height: 29px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999999;
            position: relative;
            padding-right: 8px;
            font-size: 14px;

            img {
                width: 8px;
                height: 8px;
                position: absolute;
                right: 6px;
            }
        }
    }

    .line {
        display: flex;
        align-items: center;

        > div {
            flex: 1;
            margin: 5px 6px;
            border: 1px solid #dcdcdc;
            color: #333;
            border-radius: 2px;
        }

        > .money-box {
            position: relative;

            input {
                border: none;
                padding-left: 6px;
                height: 25px;
                width: 82px;
                padding-right: 30px;
                font-size: 15px;
                text-align: right;
            }
        }

        .upfile {
            margin-left: 5px;
            margin-top: 5px;
            font-size: 13px;
        }
    }

    .upfile {
        margin-left: 7px;
        margin-top: 5px;
        font-size: 13px;
    }

    .up-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        padding-bottom: 0;

        > div {
            border-radius: 5px;
            overflow: hidden;
        }
    }
</style>